<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户管理 会员查询</title>
<link href="${rc.contextPath}/assets/css/bootstrap.min.css"
	rel="stylesheet" />
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/font-awesome.min.css" />
<!-- <link rel="stylesheet"
	href="${rc.contextPath}/assets/css/datepicker.css" /> -->
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/daterangepicker.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ui.jqgrid.css" />

<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/jquery-ui-1.10.3.full.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" />
<script src='${rc.contextPath}/assets/js/jquery-2.0.3.min.js'></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>

<script src="${rc.contextPath}/assets/js/jquery-ui-1.10.3.full.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
<script src="${rc.contextPath}/common/js/common.js"></script>

<script
	src="${rc.contextPath}/common/js/market/service/customer_deal_detail.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-select.js"></script>
<script
	src="${rc.contextPath}/common/js/market/service/customer_deal_detail.js"></script>
<script src="${rc.contextPath}/assets/js/chosen.jquery.min.js"></script>
<script type="text/javascript"
	src="${rc.contextPath}/common/js/zTree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
	src="${rc.contextPath}/common/js/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript"
	src="${rc.contextPath}/common/js/zTree/js/jquery.ztree.exedit-3.5.js"></script>
<script
	src="${rc.contextPath}/assets/js/date-time/daterangepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/date-time/moment.min.js"></script>
<link rel="stylesheet" href="${rc.contextPath}/assets/css/chosen.css" />
<link rel="stylesheet"
	href="${rc.contextPath}/common/js/zTree/css/zTreeStyle/zTreeStyle.css"
	type="text/css" />
<link href="${rc.contextPath}/common/css/common/commonnew.css"
	rel="stylesheet" type="text/css" />
<script>
var deptJson = $deptJson;
</script>

<body>
	<div class="main-container">
		<div class="page-content">

			<div class="page-header">
				当前位置 <i class="icon-double-angle-right"></i> 客户管理 <i
					class="icon-double-angle-right"></i> 公海客户查询

				<p style="float: right">姓名： $!{currentUser.ename}</p>
			</div>

			<form class="form-horizontal" id="validation-form" method="post">
				<input id="rootPath" type="text" value="${rc.contextPath}"
					style="display: none" /> <input id="customerType"
					name="customerType" type="text" value="6" style="display: none" />
				<div class="form-group">
					<label class="control-label col-sm-2" for="id-date-range-picker-1">注册日期:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<div class="input-group">
								<input class="form-control input-medium" type="text"
									style="width: 188px;" name="operateTime"
									id="id-date-range-picker-1" /> <span class="input-group-addon">
									<i class="icon-calendar bigger-110"></i>
								</span>
							</div>
						</div>
					</div>
					<label class="control-label col-sm-2" for="agentCode">是否购买商品:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<select id="isBuy" name="isBuy" class="input-medium">
								<option value="">请选择</option>
								<option value="1">是</option>
								<option value="0">否</option>
							</select>
						</div>
					</div>


				</div>
				<div class="form-group">
					<label class="control-label col-sm-2" for="id-date-range-picker-1">会员号:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="customId" id="customId"
								class="form-control input-sm" value="" />
						</div>
					</div>

					<label class="control-label col-sm-2 " for="agentCode">分公司:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<select id="companyId" name="companyId" class="input-medium">
								<option value="">请选择</option> #foreach($company in $companyList)
								<option value="$company.id">$!company.companyAbb</option> #end
							</select>
						</div>
					</div>

				</div>
				<div id="advanceSerch">
					<div class="form-group">
						<label class="control-label col-sm-2 " for="agentCode">客户名称:</label>
						<div class="col-sm-2">
							<div class="clearfix">
								<input type="text" name="customName" id="customId"
									class="form-control input-sm" value="$!{customer.customerType}" />
							</div>
						</div>

						<label class="control-label col-sm-2 ">手机:</label>
						<div class="col-sm-2">
							<div class="clearfix">
								<input type="text" name="phone" id="phone"
									class="form-control input-sm" value="$!{customerContact.uname}" />
							</div>
						</div>
						<label class="control-label col-sm-1 " for="agentCode">联系人:</label>
						<div class="col-sm-2">
							<div class="clearfix">
								<input type="text" name="agentCode" id="agentCode"
									class="form-control input-sm" value="$!{customerContact.uname}" />
							</div>
						</div>
					</div>
					<div class="form-group">

						<label class="control-label col-sm-2 ">联系邮箱:</label>
						<div class="col-sm-2">
							<div class="clearfix">
								<input type="text" name="agentCode" id="agentCode"
									class="form-control input-sm" value="$!{customerContact.uname}" />
							</div>
						</div>
						<label class="control-label col-sm-2 " for="agentCode">绑定邮箱:</label>
						<div class="col-sm-2">
							<div class="clearfix">
								<input type="text" name="email" id="email"
									class="form-control input-sm" value="$!{customerContact.uname}" />
							</div>
						</div>
						<label class="control-label col-sm-1 ">所属区域:</label>
						<div class="col-sm-1">
							<div class="clearfix">
								<select id="area" class="width-180 chosen-select"
									name="regionalId">
									<option value="">--请选择--</option> #foreach($area in
									$childAreaList)
									<option value="$!area.areaID">$!area.name</option> #end
								</select>
							</div>
						</div>
					</div>
				</div>
				<input type="hidden" id="startAddTime" name="startAddTime" /> <input
					type="hidden" id="endAddTime" name="endAddTime" /> <input
					type="hidden" id="customerModel" name="customerModel" /> <input
					type="hidden" id="allotNum" name="allotNum" />
				<div class="col-sm-offset-4">
					<button type="button" class="btn btn-danger" id="queryButton">查询</button>
					&nbsp;&nbsp;
					<button type="reset" class="btn">重置</button>
					<a id="serchType">高级搜索</a>
				</div>
			</form>
			<div id="dialog" class="hide"></div>
			<hr />
			<table id="grid-table"></table>

			<div id="grid-pager"></div>
		</div>
	</div>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h2 class="modal-title" id="myModalLabel">调配申请</h2>
				</div>

				<form id="allotFrom" class="form-horizontal"
					action="${rc.contextPath}/allot/dealPersonChange" method="post">
					<div class="form-group">
						<label class="col-sm-2 control-label">当前分公司</label>
						<div class="col-sm-10">
							<label class="control-label col-sm-2" id="companyNow"></label>
						</div>
					</div>
					
					<div class="form-group">
						<label class="control-label col-sm-2" for="inputEmail">接收人</label>
						<div class="col-sm-10">
							<select id="receivedCompany" name="receivedCompany"
								onchange="setReceivedPersonShow(this.value);setReceivedPerson(this.value);"
								class="input-medium col-sm-3">
								<option value="--">请选择</option>
							</select>
							<select id="receivedPerson" name="receivedPerson"
								class="input-medium col-sm-3">
								<option value="--">请选择</option>
							</select>
						</div>
						
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2">调配原因</label>
						<div class="col-sm-10">
						 <textarea id="mixCause" name="mixCause" rows="3" cols="55"> </textarea></div>
					</div>
					<div class="modal-footer">
				      <button type="button" class="btn" onclick="checkApplyParam()">确定</button>
				      <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearSelect()">取消</button>
				  </div>
				  	  <input type="hidden" id="selectedCusId" name="selectedCusId"/>
				  	  <input type="hidden" id="compamyid" name="compamyid"/>
			</div>
			</form>

		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
	</div>

	<script type="text/javascript">
		try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
	</script>
	<script type="text/javascript">
		/* $("#area").searchableSelect(); */
		$(".chosen-select").chosen(); 
		var selectedCusId;
		//校验申请调配数据 并根据不同选定内容跳转链接
		function checkApplyParam(){

			var bb = getRowData();
			if(selectedCusId==null||selectedCusId==''){
				selectedCusId = eval(bb);
			}
			
			var dealPersonChange = "${rc.contextPath}/allot/dealPersonChange";
			var dealCompanyChange = "${rc.contextPath}/allot/dealCompanyChange";
			
			var receivedCompany = $("#receivedCompany option:selected").val().split(",")[0];//选中分公司id
			var receivedPerson = $("#receivedPerson option:selected").val();//选中员工empNo.
			
			var companyNow = $("#compamyid").val();
			
			if(receivedCompany!=companyNow){//跨公司
				alert("跨分公司调配");
				if(confirm("您确定要调配"+selectedCusId.length+"个客户？")){
					$('#allotFrom').attr('action',dealCompanyChange);
					$('#selectedCusId').val(selectedCusId);
					document.getElementById("allotFrom").submit();
				}
			}
			if(receivedCompany==companyNow){//同公司
				alert("同分公司调配");
				if(confirm("您确定要调配"+selectedCusId.length+"个客户？")){
					$('#allotFrom').attr('action',dealPersonChange);
					$('#selectedCusId').val(selectedCusId);
					document.getElementById("allotFrom").submit();
				}
			}
			
		}
	
	
		$('.selectpicker').selectpicker({
		  style: 'btn-danger',
		  size: 4
		});

		//将form数据转为jsonObj的工具方法
		$.fn.serializeObject = function()    
		{    
		   var o = {};    
		   var a = this.serializeArray();    
		   $.each(a, function() {    
		       if (o[this.name]) {    
		           if (!o[this.name].push) {    
		               o[this.name] = [o[this.name]];    
		           }    
		           o[this.name].push(this.value || '');    
		       } else {    
		           o[this.name] = this.value || '';    
		       }    
		   });    
		   return o;    
		};  
	
		//格式化table第一列内容
		function actionFormat( cellvalue, options, rowObject ){
			 return "<a href='#' onclick=\"goCustomerDetails('"+cellvalue+"')\" >"+cellvalue+"</a>";
		}
		
		//格式化客户类型
		function actionCustomerType( cellvalue, options, rowObject ){
			switch(cellvalue)
			{
			case 1:
			  return '新注册客户';
			  break;
			  
			case 3:
			  return '意向客户';
			  break;
			case 5:
				  return '待续费客户';
				  break;
			case 4:
				  return '服务期客户';
				  break;
			case 7:
				  return '报备客户';
				  break;
			case 12:
				  return '保护期客户';
				  break;
			case 6:
				  return '公海客户';
				  break;
			default:
				return '未知';
			}
		}
		
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";
		$("#advanceSerch").hide();
		var column = '["会员号","客户名称","最近联系人","最近联系时间","所属区域","注册来源","注册时间","所属分公司","所属人","客户类型","分公司id"]';
		var columnCode = [{"name":"customId",
						   "index" : "custom_id",
						   "width":44,
						   "formatter" : actionFormat,
						   "unformat": function(cellvalue, options, rowObject){return cellvalue}}, 
						  {"name":"customName","width":90,"sortable":false}, 
						  {"name":"remark","width":40,"sortable":false}, 
						  {"name":"addTime","width":80,"index" : "add_time"}, 
						  {"name":"areaName","width":40,"sortable":false},
						  {"name":"customerSource","width":35,"sortable":false},
						  {"name":"addTime","width":80,"sortable":false},
						  {"name":"companyAbb","width":60,"sortable":false},
						  {"name":"ename","width":40,"sortable":false},
						  {"name":"customerType","width":52,"formatter" : actionCustomerType,"sortable":false},
						  {"name":"companyId","hidden":true} ];
		var url = "${rc.contextPath}/customerManage/queryCustomerNew";
		column = jQuery.parseJSON(column);
		
		postData = jQuery.parseJSON('{"customId":"hy001"}');
		$("#queryButton").click(function() {
			console.log($("#validation-form").serializeObject());
            $(grid_selector).jqGrid('setGridParam',{
            	postData:$("#validation-form").serializeObject(),
            	page:1,
            	rows:10
        	}).trigger('reloadGrid'); 
		});
		
		$("#serchType").click(function() {
			$("#advanceSerch").toggle("normal");
		});
		
		$('input[name=operateTime]').daterangepicker(
				{
					format:'YYYY-MM-DD',
					separator : ' 到 ',
					language:"cn",
					/* dateLimit : {
                        days : 30
                    }, */ //起止时间的最大间隔
                    ranges : {
                        //'最近1小时': [moment().subtract('hours',1), moment()],
                        '今日': [moment().startOf('day'), moment()],
                        '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                        '最近7日': [moment().subtract('days', 6), moment()],
                        '最近30日': [moment().subtract('days', 29), moment()]
                    },
                    opens : 'right', //日期选择框的弹出位置
                    locale : {
                        applyLabel : '确定',
                        cancelLabel : '取消',
                        fromLabel : '起始时间',
                        toLabel : '结束时间',
                        customRangeLabel : '选择时间',
                        daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                        monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                            '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                        firstDay : 1
                    }
				}
		).prev().on(ace.click_event, function(){
			$(this).next().focus();
		}); 
		
		
		//switch element when editing inline
		function aceSwitch( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=checkbox]')
						.wrap('<label class="inline" />')
					.addClass('ace ace-switch ace-switch-5')
					.after('<span class="lbl"></span>');
			}, 0);
		}
		//enable datepicker
		function pickDate( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=text]')
						.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
			}, 0);
		}
		
		//it causes some flicker when reloading or navigating grid
		//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
		//or go back to default browser checkbox styles for the grid
		function styleCheckbox(table) {
		/**
			$(table).find('input:checkbox').addClass('ace')
			.wrap('<label />')
			.after('<span class="lbl align-top" />')
	
	
			$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
			.find('input.cbox[type=checkbox]').addClass('ace')
			.wrap('<label />').after('<span class="lbl align-top" />');
		*/
		}
		
	
		//unlike navButtons icons, action icons in rows seem to be hard-coded
		//you can change them like this in here if you want
		function updateActionIcons(table) {
			/**
			var replacement = 
			{
				'ui-icon-pencil' : 'icon-pencil blue',
				'ui-icon-trash' : 'icon-trash red',
				'ui-icon-disk' : 'icon-ok green',
				'ui-icon-cancel' : 'icon-remove red'
			};
			$(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
			*/
		}
		
		//replace icons with FontAwesome icons like above
		function updatePagerIcons(table) {
			var replacement = 
			{
				'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
				'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
				'ui-icon-seek-next' : 'icon-angle-right bigger-140',
				'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
			};
			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
		}
	
		function enableTooltips(table) {
			$('.navtable .ui-pg-button').tooltip({container:'body'});
			$(table).find('.ui-pg-div').tooltip({container:'body'});
		}
		
		function makegrid(postData){
			jQuery(grid_selector).jqGrid({
				url : url,
				postData,
				mtype : "POST",
				contentType : "application/json",
				datatype : "json",
				autowidth:true,
				colNames:column,
				colModel:columnCode,
				
				viewrecords : true,
				rowNum:20,
				rowList:[20],
				pager : pager_selector,
				emptyrecords: "没有查到相关数据！", 
				pgtext : "第{0}页，总共{1}页", 
				recordtext : "查看 {0} - {1}条记录， 总记录数 {2}",
				loadtext:"加载中，请稍候...",
				altRows: true,
				multiselect : true,
				sortorder: "desc",
				sortname: 'add_time',
				autowidth:true,
		        shrinkToFit: true,
		        scrollrows: false,
				jsonReader : {
				      root:"records",
				      page: "pageNow", //当前页
				      total: "pageCount", //总页数
				      records: "rowCount"//总记录数
				},
				 loadComplete : function() {
					var table = this;
					
					var re_records = $(grid_selector).getGridParam('records');
					if(re_records == 0 || re_records == null){
						$(grid_selector).setGridHeight(0);
					} if(re_records < 10){
						$(grid_selector).setGridHeight(re_records*35);
					} 
					else {
						$(grid_selector).setGridHeight(642);
					}
					$("#id").setGridWidth($(window).width()*0.98);　
					setTimeout(function(){
						updatePagerIcons(table);
					}, 0);
				},
				onSelectRow: function () {
					//设置全部调配显示或隐藏的方法
					var selectedIds = $(grid_selector).jqGrid("getGridParam", "selarrrow");
		            if(selectedIds!=''){
		            	$("#allotAll").hide();
		            }else{
		            	$("#allotAll").show();
		            }
		        },
		        onSelectAll:function() { 
		        	//设置全部调配显示或隐藏的方法
					var selectedIds = $(grid_selector).jqGrid("getGridParam", "selarrrow");
		            if(selectedIds!=''){
		            	$("#allotAll").hide();
		            }else{
		            	$("#allotAll").show();
		            }
		        }
			});
			
			
		 	
			if(1){
				//调配
				$(grid_selector)
				.navGrid(pager_selector,{edit:false,add:false,del:false,search:false})
				.navButtonAdd(
						pager_selector,
						{
						 caption:"调配  ",
						 title:"调配  ",
						 buttonicon : 'icon-share-alt blue',
						 onClickButton: function(){
							 	 var selectedIds = $(grid_selector).jqGrid("getGridParam", "selarrrow");
							 	 var rowData = [];
							 	 var company;
							 	 //检查是否有数据被选中
							 	 if(!selectedIds.toString()){
							 		 alert("请选择至少一条数据");
							 	 }
							 	 //获取选中会员编号
							 	 selectedIds.forEach(function(id){  
							 		var tempRow = $(grid_selector).jqGrid('getRowData',id);
							 		rowData.push(tempRow.customId);
							 		//获取一条选中数据用来显示当前分公司
							 		company = tempRow;
								 }) 
							 	 //
								 selectedCusId = rowData; 
							 	 
							 	 //显示当前分公司
							 	 setCompany(company);
							 	 //设置部门下拉框
								 findDept();
								 //模态框弹出方法
								 $("#myModal").modal({backdrop:'static'});
								 
							 }, 
						position:"left"}).navSeparatorAdd(pager_selector,{sepclass : "ui-separator",sepcontent: ''})
				//全部调配按钮
				.navButtonAdd(
						pager_selector,
						{
						 id:"allotAll",
						 caption:"全部调配",
						 title:"全部调配",
						 buttonicon : 'icon-random red',
						 onClickButton: function(){
							 //校验提交调配客户数量
							 checkAllotNumber($("#validation-form").serializeObject());
							 //0成功，1数量超过2000，2所选内容不是同一分公司
							 var status = $("#allotNum").val();
							 if(status==1){
								 alert("操作客户数量过多，请修改查询条件后重试！");
							 }
							 if(status==2){
								 alert("只能调配同一家分公司客户，请选择符合条件的客户！");
							 }
							 if(status==0){
								//显示当前分公司
							 	 setCompany();
							 	//设置部门下拉框
								 findDept();
								//模态框弹出方法
								 $("#myModal").modal({backdrop:'static'});
							 }
							 }, 
						position:"left"})
				;
			}
			
			
		
		}
		initTree();
		makegrid(postData);
		
		
	</script>
</body>
</html>
